import React, { createElement, FC } from 'react';
import { DatePicker, DatePickerProps } from 'antd';
import dayjs from 'dayjs';

export const DateFormatConstant = [
  {
    label: 'YYYY-MM',
    showTime: false,
    value: 1,
  },
  {
    label: 'YYYY-MM-DD',
    showTime: false,
    value: 2,
  },
  {
    label: 'YYYY-MM-DD hh:mm',
    showTime: true,
    value: 3,
  },
  {
    label: 'YYYY-MM-DD hh:mm:ss',
    showTime: true,
    value: 4,
  },
];

export const BaseFieldDate: FC<any> = (props) => {
  const { columnConfig, style, className, value, onChange, dateProps } = props;

  const format = columnConfig?.format;

  const currFormat = DateFormatConstant.find((f) => f.value === format);

  const onDateChange: DatePickerProps['onChange'] = (date, dateString) => {
    const currUnix = date?.valueOf();
    onChange?.(currUnix);
  };

  return (
    <DatePicker
      className={className}
      style={{ width: '100%', ...style }}
      {...dateProps}
      placeholder={columnConfig?.placeholder}
      showTime={currFormat?.showTime}
      format={currFormat?.label || 'YYYY-MM-DD'}
      value={value ? dayjs(value) : undefined}
      onChange={onDateChange}
    />
  );
};
